

<template>


  <div class="col-lg-12 col-md-12">
  </div>


<!--  <div class="preloader-area">-->
<!--    <div class="spinner">-->
<!--      <div class="inner">-->
<!--        <div class="disc"></div>-->
<!--        <div class="disc"></div>-->
<!--        <div class="disc"></div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->


  <div class="profile-authentication-area">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-12">
          <div class="profile-authentication-image">
            <div class="content-image">
              <div class="logo">
              </div>

            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-12">
          <div class="login-form">
            <h2>登录</h2>
            <form>
              <div class="form-group">

                <input type="text" class="form-control" placeholder="请输入用户名" v-model="userForm.username">
              </div>
              <div class="form-group">

                <input type="password" class="form-control" placeholder="请输入密码" v-model="userForm.password">
              </div>
              <button type="button" class="default-btn" @click="handleLogin()">登录</button>
              <button type="button" class="default-btn" @click="goRegister()">去注册</button>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref} from "vue";
//默认导出这个变量名字可以随便起request
import {login} from '@/api/webUser.js'
import {ElMessage} from 'element-plus'
import router from '@/router/index.js'

import  useUserStore from '@/stores/loginStore.js'



const userForm = ref({
  username: "",
  password: "",
})

// 登录方法
const handleLogin= async () => {
 let request= await login(userForm.value)
 console.log(request)
 if(request.code===200){
   ElMessage.success("登录成功")
   const userStore = useUserStore()
   userStore.userModel=request.data

   // 登录成功跳转
     router.push("/")
 }
}
//注册方法
const goRegister=()=>{
  router.push('/register')
}


</script>
<style scoped>
.login-form input{
  margin: 50px 0px;
}
</style>